<template>
  <div>
    <!--  支付弹窗组件-->
    <el-dialog
      :visible.sync="payVisible"
      width="40%"
      center
      title="支付详情"
      :show-close="false"
    >
      <!--      支付详情-->
      <span>账单号: {{ addPayForm.billId }} </span>
      <el-table
        :data="gooseData"
        style="width: 100%"
      >
        <el-table-column
          prop="gooseName"
          label="产品名称"
          :header-cell-style="headClass"
          :cell-style="rowClass"
        />
        <el-table-column
          prop="standard"
          label="规格"
        />
        <el-table-column
          prop="price"
          label="售价(元)"
        />
        <el-table-column
          prop="num"
          label="数量"
        />
        <el-table-column label="总价(元)">
          <template #default="scope">
            <div>
              {{ scope.row.price * scope.row.num }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-form ref="form" :inline="true" :model="addPayForm" label-width="60px">
        <el-form-item
          label="应收款:"
          prop="sumMoney"
        >
          <div>{{ addPayForm.sumMoney }} </div>
        </el-form-item>
        <el-form-item
          label="实收款:"
          prop="realMoney"
        >
          <div>{{ addPayForm.realMoney }} </div>
        </el-form-item>
        <div style="margin-top: 50px;text-align: center">
          <el-button style="margin-right: 20px" size="big" @click="cancel">取 消</el-button>
          <el-button style="margin-left: 20px" size="big" type="primary" @click="submit('form')">支付</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from '_element-ui@2.13.2@element-ui'
import { addBill } from '@/api/bill'
import { EventBus } from '@/event-bus'

export default {
  name: 'PayOrder',
  props: ['gooseData', 'addPayForm', 'member'],
  data() {
    return {
      // addPayForm数据表
      form: {},
      // 支付组件弹窗开关
      payVisible: false
    }
  },
  methods: {
    // 取消点击
    cancel() {
      this.payVisible = false
    },
    // 点击支付
    submit() {
      // 封装gooseBill数据
      const gooseBill = []
      for (const i of this.gooseData) {
        gooseBill.push({
          'gooseId': i.id,
          'price': i.price,
          'num': i.num
        })
      }
      const data = {
        'gooseBill': gooseBill,
        'bill': {
          'billId': this.addPayForm.billId, // 账单id
          'memberId': this.member.id, // 会员id
          'sumMoney': this.addPayForm.sumMoney, // 应付款价格
          'realMoney': this.addPayForm.realMoney // 实际付款价格
        }
      }
      new Promise((resolve, reject) => {
        addBill(data).then(response => {
          if (response.code === 20000) {
            Message({
              message: '支付成功!',
              type: 'success',
              duration: 3 * 1000
            })
          }
          // 刷新数据页面
          this.payVisible = false
          // 刷新member数据
          this.$parent.$parent.flashMember()
          // 关闭选购弹窗
          this.$parent.cancel()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 表头居中显示
    headClass() {
      return 'text-align:center'
    },
    // 表格数据居中显示
    rowClass() {
      return 'text-align:center'
    }
  }
}
</script>

<style scoped>

</style>
